<template>
	<!-- 日期显示 -->
	<view class="month">
		<view class="month-box"
			:style="{backgroundColor: dateActiveIndex(dateIndex) ? dateActiveColor : ''}"
			v-for="(dateInfo, dateIndex) in months" :key="dateIndex">
			<view class="month-box-date"
				@tap="chooseDate(getAssignDateInfo(false, 0) + '-' + (Number(startMonth) + dateIndex))">
				<view class="month-box-date-text" :style="{color: dateActiveIndex(dateIndex) ? textActiveColor : '',}">
					{{ Number(startMonth) + dateIndex }}月
				</view>
				<view class="month-box-date__isToday"
					v-if="getAssignDateInfo(true, 0) == getAssignDateInfo(false, 0) && getAssignDateInfo(true, 1) == Number(startMonth) + dateIndex && showActive"
					:style="{ backgroundColor: dateActiveColor }"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			months: { //月数
				type: [Number, String],
				default: 6
			},
			startMonth: { //起始月份
				type: [Number, String],
				default: 1
			},
			dateActiveColor: { //日期选中背景颜色
				type: String,
				default: '#62AEF8'
			},
			textActiveColor: { // 日期选中文字颜色
				type: String,
				default: '#FFFFFF'
			},
			selectedDate: { //选中的年月
				type: [Number, String],
				default: 1
			},
			currentDate: { //当前年月
				type: String,
				default: ''
			},
			showActive: { //是否展示高亮
				type: Boolean,
				default: true
			}
		},
		computed: {
			dateActiveIndex() {
				return (dateIndex) => {
					return this.showActive ? this.getAssignDateInfo(false, 1) == (Number(this.startMonth) +
						dateIndex) : false
				}
			},
			getAssignDateInfo() {
				return (isToday, index) => {
					return (isToday ? this.currentDate : this.selectedDate).split('-')[index] * 1
				}
			},
		},
		methods: {
			chooseDate(selectedDate) {
				this.$emit('chooseDate', selectedDate)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.month {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;


		&-box {
			position: relative;
			padding: 8rpx 24rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			margin: 12px 0;

			&-date {

				&-text {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
				}
				
				&__isToday{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					border-radius: 50%;
					z-index: -1;
					opacity: 0.4;
				}

			}
		}
	}
</style>